<template>
    <el-form-item>
      <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <!-- 生产订单表 -->
    <h2 style="margin-left: 400px;">产品档案</h2>
    <div>
      <table class="order-table">
        <tr>
          <th colspan="6">基本信息</th>
        </tr>
        <tr>
          <td style="width: 100px;">产品名称：</td>
          <td>
            <el-input v-model="form.productsName" placeholder="请输入产品名称" style="width: 150px;" />
          </td>
          <td style="width: 100px;">产品编号：</td>
          <td>
            <el-input v-model="form.productsNumber" placeholder="请输入产品编号" style="width: 150px;" disabled />
          </td>
          <td>所属类别：</td>
          <td>
            <el-select v-model="form.productsType" placeholder="请选择所属类别">
                <el-option label="汽车行业" value="汽车行业" />
                <el-option label="医疗行业" value="医疗行业" />
                <el-option label="工程行业" value="工程行业" />
                <el-option label="电子行业" value="电子行业" />
                <el-option label="食品行业" value="食品行业" />
                <el-option label="材料" value="材料" />
                <el-option label="钢结构加工" value="钢结构加工" />
                <el-option label="塑钢型材" value="塑钢型材" />
            </el-select>
          </td>
        </tr>
        <tr>
          <td style="width: 100px;">单位：</td>
          <td>
            <el-input placeholder="请输入单位" v-model="form.productsUnit" style="width: 150px;"  />
          </td>
          <td style="width: 100px;">规格型号：</td>
          <td>
            <el-input v-model="form.productsNum" style="width: 150px;" />
          </td>
          <td style="width: 100px;">单价：</td>
          <td><el-input placeholder="请输入单价" v-model="form.price" style="width: 150px;" /></td>
        </tr>
        <tr>
            <td>产品说明：</td>
            <td colspan="5"><el-input v-model="form.remark" type="textarea" /></td>
        </tr>
      </table>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, toRaw } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRoute,useRouter } from 'vue-router';
  import axios from 'axios';
  import router from '@/router';
  import { useCounterStore } from "@/stores/counter";
  import { Wread, Wwrite } from "@/axios/axiosHelper";
  import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
  
  const store = useCounterStore();

  const route = useRoute();

  const form = reactive({
    productsId:route.query.productsId,
    productsName:'',
    productsNumber:'',
    productsType:'',
    productsUnit:'',
    productsNum:'',
    price:'',
    remark:'',
  })

  onMounted(() => {
      FanProducts();
  })

  const FanProducts = () => {
      axios.get("https://localhost:7095/api/Products/ShowProducts",{
        params:{
            productsId:route.query.productsId,
        }
      })
      .then(res=>{
        form.productsName = res.data.data[0].productsName,
        form.productsNumber = res.data.data[0].productsNumber,
        form.productsType = res.data.data[0].productsType,
        form.productsUnit = res.data.data[0].productsUnit,
        form.productsNum = res.data.data[0].productsNum,
        form.price = res.data.data[0].price,
        form.remark = res.data.data[0].remark,
        form.value = res.data.data[0]
        console.log("查询反填产品明细",res.data.data)
      })
  }

  const generateProductNumber = () => {
    const randomLetters = Array.from({ length: 4 }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 65)).join('');
    const randomDigits = Array.from({ length: 10 }, () => Math.floor(Math.random() * 10)).join('');
    form.productsNumber = randomLetters + randomDigits;
  }

  onMounted(() => {
    generateProductNumber();
  })

  const onSubmit =()=>{
    axios.post("https://localhost:7114/api/Products/UpdProducts",form)
    .then(res=>{
        if(res.data.code == 100){
            ElMessage.success(res.data.msg);
            return;
        }
        else{
            ElMessage.error(res.data.msg);
            return;
        }
    })
  }
  
  </script>
  
  <style scoped>
  .order-table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .order-table th,
  .order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  
  .order-table th {
    background-color: #f2f2f2;
  }
  </style>
  
  <style scoped>
  #app {
    padding: 20px;
  }
  </style>    